<template>
  <div>
    <div class="self-container">
      <div class="nav-list">
        <div
          v-for="item in navList"
          :key="item.id"
          :class="['nav-item', item.id === activeNav ? 'active-nav-item' : '']"
          @click="navClick(item.id)"
        >
          {{ item.title }}
        </div>
      </div>
      <div class="flex">
        <ul v-loading="listLoading" class="info-list-box">
          <li
            v-for="item in serviceList"
            :key="item.id"
            class="info-item"
            @click="toDetail(item)"
          >
            <!-- <router-link
          :to="{
            path: '/serviceDynamic/servicelist/serviceDetail/' + item.id,
          }"
        >
          
          {{ item.title }}
        </router-link> -->
            <div
              class="left"
              :style="{ background: `url(${item.mainImg})` }"
            ></div>
            <div class="right">
              <div>
                <h6 class="info-title">
                  {{ item.title }}
                </h6>
                <p class="text-gray-400 py-2">
                  {{ item.dynamicInfo }}
                </p>
              </div>

              <div class="text-gray-400">
                <i class="el-icon-time"> </i>
                <span>
                  {{ item.releaseTime }}
                </span>
              </div>
            </div>
          </li>
          <div class="mt-16 mb-8">
            <pagination
              v-show="tableTotal > 0"
              :total="tableTotal"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              :pageSizes="[10, 12, 20, 30, 40]"
              @pagination="getList"
            />
          </div>
        </ul>
        <div class="aside ml-4">
          <h5 class="relative -top-1 py-4 border-t-4 border-blue-500 px-4">
            相关推荐
          </h5>
          <ul class="px-4">
            <li
              v-for="item in recommendList"
              :key="item.id"
              class="recommend-item flex"
              @click="toDetail(item)"
            >
              <div>
                <el-image
                  :src="item.mainImg"
                  class="recommend-left"
                  fit="cover"
                ></el-image>
              </div>
              <div class="pl-2 ">
                <p class="line-2">{{ item.name || item.title }}</p>
                <p class="pt-4 text-gray-400 text-sm">{{ item.releaseTime }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNav: 0,
      navList: [
        { id: 0, title: '全部' },
        { id: 1, title: '政府服务' },
        { id: 2, title: '技术专家' },
      ],
      listLoading: false,
      tableTotal: 0,
      queryParams: {
        pageSize: 10,
        pageNum: 1,
      },
      serviceList: [
        {
          id: 0,
          mainImg: 'https://w.wallhaven.cc/full/6o/wallhaven-6oeww7.png',
          title: '专注于疫苗邻域，华诺泰生物或天使轮融资',
          releaseTime: '2021-12-03',
          dynamicInfo:
            '世界在发生剧烈的变化，技术也在发生快速的变化，所有的变化都会深刻影响到我们每一家企业，所以青年企业家朋友们，明天我们的企业能走到哪一步，关键在于眼光，在于对未来的判断。如果能够把......',
          typeId: 1,
        },
        {
          id: 1,
          mainImg: 'https://w.wallhaven.cc/full/y8/wallhaven-y8keeg.jpg',
          title:
            '4月分江西经济加快恢复；路透：纳斯达克将收紧上市规则纳斯达克将收紧上市规则式风格士大夫嘎斯豆腐干噶士大夫嘎斯豆腐干士大夫发给敢死队风格士大夫',
          releaseTime: '2021-12-03',
          dynamicInfo:
            '这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内...',
          typeId: 1,
        },
        {
          id: 2,
          mainImg: 'https://w.wallhaven.cc/full/pk/wallhaven-pkmjd3.jpg',
          title: '标题3',
          releaseTime: '2021-12-03',
          dynamicInfo:
            '这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内...',
          typeId: 1,
        },
        {
          id: 3,
          mainImg: 'https://w.wallhaven.cc/full/y8/wallhaven-y8keeg.jpg',
          title: '标题4',
          releaseTime: '2021-12-03',
          dynamicInfo:
            '这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内...',
          typeId: 1,
        },
        {
          id: 4,
          mainImg: 'https://w.wallhaven.cc/full/y8/wallhaven-y8keeg.jpg',
          title: '标题5',
          releaseTime: '2021-12-03',
          dynamicInfo:
            '这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内...',
          typeId: 1,
        },
      ],

      recommendList: [
        {
          id: 0,
          mainImg: 'https://w.wallhaven.cc/full/6o/wallhaven-6oeww7.png',
          title: '专注于疫苗邻域，华诺泰生物或天使轮融资',
          releaseTime: '2021-12-03',
          dynamicInfo:
            '世界在发生剧烈的变化，技术也在发生快速的变化，所有的变化都会深刻影响到我们每一家企业，所以青年企业家朋友们，明天我们的企业能走到哪一步，关键在于眼光，在于对未来的判断。如果能够把......',
          typeId: 1,
        },
      ],
    }
  },
  computed: {
    activeNavClass() {
      return (index) => {
        return index === this.activeNav ? 'active-nav-item' : ''
      }
    },
    floatLeft() {
      let distanceLeft = this.activeNav * 8

      return distanceLeft
    },
  },
  watch: {
    $route: {
      handler(v, oldv) {
        if (v !== oldv) {
          this.navRouter(v)
        }
      },
    },
  },
  mounted() {
    this.navRouter(this.$route)
  },
  methods: {
    navRouter(route) {
      let typeId
      typeId = route.params.typeId || 0
      this.activeNav = parseInt(typeId)
    },
    navClick(index) {
      if (parseInt(index) === parseInt(this.activeNav)) return
      this.$router.push({ path: `/serviceDynamic/servicelist/${index}` })
    },
    getList() {
      this.listLoading = true
    },
    toDetail(item) {
      let id = item.id
      let typeId = item.typeId
      this.$router.push({
        path: `/serviceDynamic/servicelist/${typeId}/serviceDetail/${id}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.nav-list {
  @apply relative flex leading-10 w-96 my-4 mt-8 cursor-pointer rounded-md  font-sans text-xl text-center border-2 border-blue-500 text-blue-500 overflow-hidden;

  .float-bg {
    min-width: 8rem;
    max-width: 8rem;
    @apply absolute  top-0 z-0 h-full bg-blue-500 transition-all  duration-500 ease-out;
  }

  .nav-item {
    min-width: 8rem;
    max-width: 8rem;
    @apply flex-grow z-10 select-none;
  }

  .active-nav-item {
    @apply text-white font-bold tracking-widest bg-blue-500;
  }
}
.info-list-box {
  .info-item {
    width: 794px;
    height: 216px;
    padding: 16px;
    cursor: pointer;
    @apply flex mb-2 rounded-md border-b transition-all duration-300  transform;
    &:hover {
      // box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
      @apply shadow-md;
    }

    .left {
      height: 100%;
      min-width: 271px;
    }
    .right {
      padding: 16px;
      @apply flex flex-col justify-between;

      .info-title {
        width: 100%;
        height: 3rem;
        line-height: 1.5rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
}
.aside {
  min-width: 390px;
  width: 390px;
  max-height: 500px;
  @apply border  border-gray-300;
  .line-1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  .recommend-item {
    @apply py-4 border-b cursor-pointer;

    .recommend-left {
      width: 104px;
      min-width: 104px;
      height: 68px;
    }
  }
}
</style>
